<template>
  <div>
    <li>
      <div class="left-top1" v-show="data.isHotSale">
        <img src="@/assets/img/section_hot.png" alt="" />
      </div>
      <div class="left-top2" v-show="data.isLatest">
        <img src="@/assets/img/section_new.png" alt="" />
      </div>
      <div class="img-box">
        <img :src="'http://sc.wolfcode.cn' + data.coverImg" alt="" />
      </div>
      <div class="txt-box">
        <h3>{{ data.name }}</h3>
        <p>{{ data.coin }} 积分</p>
        <div class="button">立即兑换</div>
      </div>
    </li>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style lang="less" scoped>
li {
  width: 285px;
  height: 412px;
  background-color: #fff;
  transition: 0.5s;
  position: relative;
  margin-bottom: 20px;
  .left-top1,
  .left-top2 {
    position: absolute;
    left: 0;
    top: 0;
  }
  .img-box {
    width: 100%;
    height: 250px;
    overflow: hidden;
  }
  .txt-box {
    text-align: center;
    line-height: 45px;
    font-size: 18px;
    h3 {
      color: #333;
    }
    p {
      font-weight: bold;
      color: #fd604d;
    }
    div {
      width: 100px;
      height: 36px;
      border: 1px solid #0a328e;
      color: #0a328e;
      line-height: 36px;
      margin: 0 auto;
    }
  }
  &:hover {
    cursor: pointer;
    transform: translateY(-15px);
  }
  &:hover .button {
    background-color: #0a328e;
    color: #fff;
  }
}
</style>